<!-- 个人中心 -->
<template>
	<view class="personal-wrap">
		<!-- 个人信息卡片 -->
		<UserinfoCard 
      v-if="userHeadData && userHeadData.style" 
      :scrollTop="scrollTop" 
      :detail="userHeadData" 
      @onShare="onShare"
    />
		
    <view class="copyright-box u-flex-col u-row-center u-col-center u-p-t-80 u-p-b-50">
			<view class="copyright-text">小犀科技</view>
			<view class="copyright-text">2021</view>
		</view>

		<!-- #ifdef H5 -->
		<view class="tabbar-hack" style="height: 120rpx; width:100%;"></view>
		<!-- #endif -->
		<!-- 关注弹窗 -->
		<rhino-float-btn></rhino-float-btn>
		<!-- 登录提示 -->
		<rhino-auth-modal></rhino-auth-modal>
		<!-- 分享组件 -->
		<rhino-share v-model="showShare" posterType="user"></rhino-share>
	</view>
</template>

<script>
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
import share from '@/utils/share';
import UserinfoCard from './components/UserinfoCard';

export default {
	components: {
		UserinfoCard
	},
	data() {
		return {
			scrollTop: 0,
			showShare: false,
			enable: false //是否开启吸顶。
		};
	},
	computed: {
		...mapGetters(['userTemplate', 'isLogin', 'userInfo', 'authType']),
		userHeadData() {
			if (this.userTemplate?.length) {
				return this.userTemplate[0].content;
			}
		}
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.init();
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},

	onShow() {
		if (this.isLogin) {
			this.init();
			this.getUserData();
		}
		this.enable = true;
	},

	methods: {
		...mapActions(['getUserInfo', 'showAuthModal', 'getUserData']),
		onShare() {
			this.showShare = true;
			uni.hideTabBar();
		},
		// 初始化
		init() {
			this.getUserInfo()
				.then(res => {
					uni.stopPullDownRefresh();
				})
				.catch(e => {
					uni.stopPullDownRefresh();
				});
		}
	}
};
</script>

<style lang="scss">
.copyright-box {
	.copyright-text {
		font-size: 22rpx;
		font-weight: 500;
		color: #c4c4c4;
	}
}
</style>
